<form nz-form [formGroup]="validateForm" (ngSubmit)="save($event)">
    <div class="modal-header">
        <div class="modal-title">{{l('EditUser')}}</div>
    </div>
    <nz-tabset>
        <nz-tab>
            <ng-template #nzTabHeading>
                用户信息
            </ng-template>
            <fieldset>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="4">
                        <label for="username" nz-form-item-required>{{l("UserName")}}</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('username')">
                        <nz-input formControlName="username" [(ngModel)]="user.userName" nzPlaceHolder="输入大于等于2并小于等于32的字符" [nzId]="'username'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('maxlength')">字符长度小于等于32</div>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('minlength')">字符长度大于等于2</div>
                        <div nz-form-explain *ngIf="getFormControl('username').dirty&&getFormControl('username').hasError('required')">请输入账户</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="4">
                        <label for="name" nz-form-item-required>{{l("Name")}}</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="8" nzHasFeedback [nzValidateStatus]="getFormControl('name')">
                        <nz-input formControlName="name" [(ngModel)]="user.name" nzPlaceHolder="请输入小于等于32的字符" [nzId]="'name'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('maxlength')">字符长度小于等于32</div>
                        <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入姓</div>
                    </div>
                    <div nz-form-label nz-col [nzSm]="4">
                        <label for="surname" nz-form-item-required>{{l("Surname")}}</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="8" nzHasFeedback [nzValidateStatus]="getFormControl('surname')">
                        <nz-input formControlName="surname" [(ngModel)]="user.surname" nzPlaceHolder="请输入小于等于32的字符" [nzId]="'surname'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('surname').dirty&&getFormControl('surname').hasError('maxlength')">字符长度小于等于32</div>
                        <div nz-form-explain *ngIf="getFormControl('surname').dirty&&getFormControl('surname').hasError('required')">请输入名</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-label nz-col [nzSm]="4">
                        <label for="email" nz-form-item-required>{{l("EmailAddress")}}</label>
                    </div>
                    <div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="getFormControl('email')">
                        <nz-input formControlName="email" [(ngModel)]="user.emailAddress" [nzId]="'email'"></nz-input>
                        <div nz-form-explain *ngIf="getFormControl('email').dirty&&getFormControl('email').hasError('email')">邮箱地址无效</div>
                    </div>
                </div>
                <div nz-form-item nz-row>
                    <div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
                        <label nz-checkbox formControlName="isactive" [(ngModel)]="user.isActive">
                            <span>{{l("IsActive")}}</span>
                        </label>
                    </div>
                </div>
            </fieldset>
        </nz-tab>
        <nz-tab>
            <ng-template #nzTabHeading>
                用户角色
            </ng-template>
            <nz-checkbox-group formControlName="editrolegroup" [(ngModel)]="roleOptions"></nz-checkbox-group>
        </nz-tab>
    </nz-tabset>

    <div class="modal-footer">
        <button nz-button [nzType]="'default'" [nzSize]="'large'" type="button" (click)="close($event)">
            {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" type="submit" [nzLoading]="saving">
            {{l("Save")}}
        </button>
    </div>
</form>